<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { reactive, ref, defineProps } from 'vue';

  // 定义接受的 props 参数
  defineProps<{
    uid?: string;
  }>();

  // 用户信息
  const userInfo = reactive({
    usernameLogin: '',
    passwordLogin: '',
    usernameRegister: '',
    passwordRegister: '',
    checkCode: '',
  });

  // 定义倒计时状态类型
  interface StateType {
    countDownTime: number;
    timer: any | null;
    countDownIng: boolean;
    getCodeDisabled?: boolean;
  }

  // 初始化倒计时状态
  const state = reactive<StateType>({
    countDownTime: 60,
    timer: null,
    countDownIng: false,
  });

  // 发送按钮的可用状态
  const sendAble = ref(true);

  // 倒计时逻辑
  const countDown = () => {
    const startTime = localStorage.getItem('startTimeLogin');
    const nowTime = Date.now();

    if (startTime) {
      let surplus = Math.floor(60 - (nowTime - +startTime) / 1000);
      state.countDownTime = surplus <= 0 ? 0 : surplus;
    } else {
      state.countDownTime = 60;
      localStorage.setItem('startTimeLogin', nowTime.toString());
    }

    // Start the countdown timer
    state.timer = setInterval(() => {
      state.countDownTime--;
      state.getCodeDisabled = true;
      state.countDownIng = true;

      if (state.countDownTime <= 0) {
        localStorage.removeItem('startTimeLogin');
        clearInterval(state.timer as number); // Cast to number to clear the interval
        state.countDownTime = 60;
        state.countDownIng = false;
        sendAble.value = true;
      }
    }, 1000);
  };

  // 发送验证码
  const sendCheckCode = () => {
    if (!sendAble.value || userInfo.usernameRegister == '') {
      ElMessage({
        message: '现在还不能发送',
        type: 'warning',
      });
      return;
    }
    sendAble.value = false;
    countDown();
  };

  // 注册提交
  const submitRegister = () => {
    // 这里可以添加注册提交的逻辑
  };
</script>

<template>
  <div class="login-box">
    <div class="login-box-form">
      <div class="login-box-item">
        <span class="login-box-item-title">账号</span>
        <el-input
          type="text"
          class="input"
          v-model="userInfo.usernameRegister"
          placeholder="手机号/邮箱号"
          maxlength="50"
        />
        <div class="login-sms-vertical-line"></div>
        <div
          class="login-sms-send"
          :class="{
            disable: userInfo.usernameRegister === '' || !sendAble,
            clickable: userInfo.usernameRegister !== '' && sendAble,
          }"
        >
          <span v-show="sendAble" @click="sendCheckCode">获取验证码</span>
          <span class="login-box-item-title" v-show="!sendAble">
            重新发送({{ state.countDownTime }})
          </span>
        </div>
      </div>
      <div class="login-box_separator-line"></div>
      <div class="login-box-item">
        <span class="login-box-item-title">验证码</span>
        <el-input
          type="text"
          class="input"
          v-model="userInfo.checkCode"
          placeholder="请输入验证码"
          maxlength="50"
        />
      </div>
    </div>
    <div class="login-box-btns">
      <div class="submit login-btn" @click="submitRegister">登&nbsp;录/注&nbsp;册</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  /* 基础布局 */
  .login-register-container {
    display: block;
    padding: 30px 40px 10px 40px;
  }

  /* 登录框 */
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .login-box-form {
    border-radius: 10px;
    border: 1px solid #e3e5e7;
    width: 100%;
  }

  .login-sms-vertical-line {
    width: 1px;
    height: 26px;
    border-left: 1px solid #e3e5e7;
  }

  .login-box_separator-line {
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #e3e5e7;
  }

  .login-box-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 5px;
  }

  .login-box-item-title {
    font-size: small;
    width: 60px;
    padding: 0 5px;
  }

  .input {
    flex: 1;
  }

  .submit {
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
  }

  .login-btn {
    background-color: #5fd5d5;
    color: #2f3238;
  }

  .login-btn:hover {
    background-color: #00d8d8;
    color: #fff;
  }

  /* 发送验证码 */
  .login-sms-send {
    text-align: center;
    font-size: smaller;
    width: 90px;
  }

  .disable {
    color: #c9ccd0 !important;
    cursor: not-allowed;
  }

  .clickable {
    color: #00a1d6;
    cursor: pointer;
  }

  .el-input {
    --el-input-focus-border: #ccc;
    --el-input-focus-border-color: #ccc;
    --el-input-border-radius: 10px;
    --el-input-height: 40px;
    border: none;
  }

  /* element-plus 定制样式 */
  .el-input::v-deep .el-input__wrapper {
    -webkit-box-shadow: none;
    padding: 0;
    font-size: small;
    background: none;
  }

  .el-input::v-deep .el-input__icon {
    margin-right: 8px;
  }

  .login-register-container::v-deep .el-tabs__active-bar {
    height: 3px;
  }

  .login-register-container::v-deep .el-tabs__nav-wrap::after {
    height: 0;
  }

  .login-register-container::v-deep .el-tabs__item {
    font-size: 17px;
  }

  .login-box-btns {
    margin-top: 10px;
  }
</style>
